<script type="module">
//实现页面中的数字可以进行加或者减的效果

//默认暴露
import {ref} from "vue";

export default {
  //使用语法糖的格式来定义数据
  setup(){
    /*
    响应式的数据：修改代码之后页面随之发生改变vue2
    非响应式的数据：修改代码之后页面不会发生改变vue3
    需要使用关键字来生命变量从而让页面变成响应式的页面 ref reactive
    如果直接使用count的数据是不会进行操作的，我们需要给count的后面加上属性value
     */
    //使用响应式的语法定义数据
    let count = ref(1)

    function increase() {
      count.value++
    }

    function decrease() {
      count.value--
    }
    //将我们定义的数据进行返回，如果不返回那么数据不会应用在页面上
    return{
      count,
      increase,
      decrease
    }
  }
}


</script>

<template>
  <div>
    <button @click="increase()">+</button>
    <!--渲染数据-->
    {{count}}
    <button @click="decrease()">-</button>
  </div>
</template>

<style scoped>

</style>
